<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css">

    <style>
        #app {
            padding: 20px;
        }

        .city, .type, .data {
            border: 1px solid #eee;
            padding: 10px;
            margin: 10px 0;
        }

        .city li, .type li {
            padding: 5px 15px;
        }

        .city li.active, .type li.active {
            background-color: orangered;
            color: white;
        }

        .data li {
            border-bottom: 1px solid #e5e9f2;
        }

        .data img {
            width: 200px;
        }

        .data .right {
            margin-left: 15px;
        }

        .data p {
            margin: 15px;
        }

        .data .title {
            font-weight: bold;
        }

        /*属性选择器*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <!--    <h1>{{firstname + lastname}}</h1> &lt;!&ndash;这样不好一般模板语言只放变量不做拼接&ndash;&gt;-->
    <h1>{{myname}}</h1>
    <ul class="flex city">
        <li>城市：</li>
        <!--绑定class属性的两种方式：传对象的写法 如果后面的表达式为true 前面就绑定该属性-->
        <li v-for="(city,i) in cityList" :class="{active:i===cityActive}"
            @click="cityActive=i">{{ city }}
        </li>
    </ul>
    <ul class="flex type">
        <li>分类：</li>
        <!--方式二 字符串的形式绑定：三元表示 传表达式的写法-->
        <li v-for="(type,i) in typeList" :class='i===typeActive?"active":""'
            @click="typeActive=i">{{ type }}
        </li>
    </ul>
    <ul class="data">
        <li><h3>共{{count}}条信息</h3></li>
        <li class="flex" v-for="(data,i) in dataList">
             <a :href="'./detail.html?id='+data.id" target="_blank">
                 <img :src="data.verticalPic" alt="图片"></a>
<!--            <a href="./detail.html?id=" + {{data.id}}>-->
<!--                <img :src="data.verticalPic" alt="图片">-->
<!--            </a>-->

            <div class="right">
                <p class="title">{{ data.name }}
                <p class="address">{{ data.categoryname }}</p>
                <p class="address">{{ data.venue }}</p>
                <p class="address">{{ data.venuecity }}</p>
                <p class="address">{{ data.showtime }}</p>
            </div>
        </li>
    </ul>
</div>
<script>
    Vue.config.devtools = false;
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: "#app",
        // 监听器 监听所有的属性和数据
        /*watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }*/
        watch: {
            //    可以监听data的全部内容 具体实现是在watch里面定义和data里面数据名字一样的方法
            cityActive(nval, oval) {
                // 方法可以传入两个参数 newVAL O=oldVAL 对一个参数是最新值第二个 是原值
                console.log(nval, oval)
                // 发生变化 获取数据 渲染页面
                this.getData()
            },
            typeActive(nval, oval) {
                // 方法可以传入两个参数 newVAL O=oldVAL 对一个参数是最新值第二个 是原值
                console.log(nval, oval)
                //    变化执行
                this.getData()
            },
        },
        /*computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
        //    计算属性的用法：某个data中的数据是通过页面中其他数据计算得到的 就要用计算属性
        }*/
        computed: {
            // 同监听属性一样是一个和变量同名的方法 但是在vue的页面中当做一个属性来用
            count() {
                // 写法一
                return this.dataList.length
            },
            /*  count:function (){
                  // 写法二
              }*/
            myname() {
                return this.firstname + "" + this.lastname
            }
        },
        created() {
            // 生命周期的第二个阶段 这一阶段 获取了所有数据
            this.getData();
            //    如果不通过{{}}拼接的方式取值,就要在生命周期的创建完成阶段 为变量进行赋值
            // this.myname = this.firstname+this.lastname  这时用到了计算属性
            // })
        },
        data() {
            return {
                cityActive: 0,
                typeActive: 0,
                cityList: ['全部', '北京', '上海', '杭州', '苏州'],
                typeList: ['全部', '演唱会', '话剧歌剧', '展览休闲'],
                dataList: [],
                // count:0,  // 放在computed---计算属性中 只用一次的数据 不通用的变量 因此vue提供了计算属性
                firstname: 'kobe',
                lastname: '布莱恩特',
                // myname:''  // 在这里还不能用js的表达式对myname赋值
            }
        },
        methods: {
            async getData() {
                let {data: {pageData: {resultData}}} = await axios.get('./data/data03.json')
                var that = this;
                // console.log(resultData) 数组;
                // 筛选城市
                if (this.cityList[this.cityActive] !== '全部') {
                    resultData = resultData.filter(
                        //数组的筛选 Array.prototype.filter属性进行数据的筛选
                        function (x) {
                            return x.venuecity === that.cityList[that.cityActive]
                        })
                }
                // 筛选种类
                if (this.typeList[this.typeActive] !== "全部") {
                    resultData = resultData.filter(function (x) {
                        return x.categoryname === that.typeList[that.typeActive];
                    })
                }
                this.dataList = resultData;
            },

        }
        /*
        *  解决03性能消耗：只在点击事件 绑定切换 不更新数据 --- 数据更新用监听器——vue提供的监听器
        * */

    });

</script>

</body>
</html>



